<template>
  <div style="display: flex">
    <div class="menu" :class="{ active: activeMenu === 1 ? true : false }" @click="changeMenu(1)">
      <Message style="width: 1em; height: 1em; margin-right: 8px" />通知
    </div>
    <div class="menu" :class="{ active: activeMenu === 2 ? true : false }" @click="changeMenu(2)">
      <Bell style="width: 1em; height: 1em; margin-right: 8px" />公告
    </div>
  </div>
  <div v-if="activeMenu === 1 ? true : false" style="max-height:400px;overflow-y:auto">
    <div
      v-for="notice of props.dataList.notice"
      :key="notice.id"
      class="notice"
      @click="dedail(notice)"
    >
      <Discount style="width: 1em; height: 1em; margin-right: 8px" />
      <div style="width: 250px">
        通知时间&nbsp;&nbsp;{{ titleUtil.formatDate(notice.createTime) }}
      </div>
      <div style="flex: 1">{{ notice.title }}</div>
    </div>
  </div>
  <div v-else style="max-height:400px;overflow-y:auto">
    <div
      v-for="notice of props.dataList.announcement"
      :key="notice.id"
      class="notice"
      @click="dedail(notice)"
    >
      <div style="width: 300px">
        公告发布时间&nbsp;&nbsp;{{ titleUtil.formatDate(notice.createTime) }}
      </div>
      <div style="flex: 1">{{ notice.title }}</div>
    </div>
  </div>

  <el-drawer v-model="drawer" title="" direction="rtl" size="50%">
    <el-descriptions title="详细信息">
      <el-descriptions-item label="发布人">{{ notice.admin }}</el-descriptions-item>
      <el-descriptions-item label="通知时间">{{
        titleUtil.formatDate(notice.createTime)
      }}</el-descriptions-item>
      <el-descriptions-item label="类型">
        <el-tag size="small" :type="activeMenu === 1 ? 'success' : 'primary'">
          {{ activeMenu === 1 ? '通知' : '公告' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="通知内容">
        <span>{{ notice.content }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import titleUtil from '@/util/titleUtil'
import { Message } from '@element-plus/icons'

const props = defineProps({
  dataList: {
    type: Object,
    default: () => {}
  }
})

const notice = ref({})
const activeMenu = ref(1)
const drawer = ref(false)

const changeMenu = (menu) => {
  activeMenu.value = menu
}

const dedail = (item) => {
  notice.value = item
  drawer.value = true
}
</script>

<style scoped lang="scss">
.menu {
  width: 200px;
  text-align: center;
  padding-bottom: 10px;
}
.menu:hover {
  color: #60bdff;
  cursor: pointer;
  font-size: 16px;
}
.active {
  border-bottom: 1px #60bdff solid;
  color: #60bdff;
}

.notice {
  display: flex;
  padding: 10px;
}
.notice:hover {
  color: #ff5100;
  cursor: pointer;
}
</style>
